<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用款申请列表</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">

    <style>
        .table > tbody > tr > td {
            height: 48px;
            max-height: 44px;
            overflow: hidden;
        }

        .table > tbody > tr > td span {
            max-height: 44px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .red {
            color: red;
        }

        .saveModle {
            width: 500px;
            height: 300px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -150px;
            background: #fff;
            border-radius: 10px;
            z-index: 1978;
            display: none;
            border: 1px solid #cfcfcf;
        }

        .saveModle .top {
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            padding-left: 7px;
            border-bottom: 1px solid #cfcfcf;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background: #4293e4;
            position: relative;
        }

        .saveModle .top .title {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            /* float: left; */
            width: 56px;
            background: #fff;
            background: #4293e4;
            margin: 0 auto;
        }

        .saveModle .top .btn {
            font-size: 20px;
            width: 34px;
            height: 22px;
            line-height: 12px;
            display: inline-block;
            position: absolute;
            right: 0;
            top: 0px;
        }

        .saveModle .top .btn:hover {
            color: red;
        }

        .saveModle .saveBtn {
            margin: 0 auto;
            margin-top: 35px;
            display: block;

        }

        .form-control {
            height: auto;
            overflow: hidden;
        }

        /*#tbList tr:nth-child(odd){*/
        /*background-color:#ECFAFD;*/
        /*}*/
    </style>
</head>

<body>
<section class="content" id="app">
    <div style="height: 25px;margin-bottom: 10px;">
        <div class="pull-left" style="width: 120px;">
            <select id="selectCompany" class="form-control"
                    style="width: 100%;height: 25px;font-size: 12px;line-height: 25px;padding-top: 0px;padding-bottom: 0px;padding-left: 6px;"
                    v-model="searchParams.selectCom">
                <option value="">请选择公司</option>
                <option v-for="item in companyList" v-bind:value="item.id">{{item.name}}</option>
            </select>
        </div>
        <div class="pull-left" style="width:120px;margin-left:10px;">
            <select v-model="searchParams.refundFlag" class="form-control"
                    style="height:25px;font-size:12px;line-height:25px;padding-top:0px;padding-bottom:0px;padding-left:6px;">
                <option v-for="(item,i) in auditFlagList" v-bind:value="item.value">{{item.name}}
                </option>
            </select>
        </div>
        <input class="form-control pull-left input-sm" type="text" @keyup.enter="search"
               placeholder="关键字"
               style="width: 120px;height: 25px;margin-left: 10px;"
               v-model="searchParams.key"/>
        <button type="button" class="btn oaBtn btn-sm" @keyup.enter="search" @click="search"
                style="margin-left: 10px;">
            查询
        </button>

        <div class="clearfix"></div>
        <!-- /.box-tools -->
    </div>
    <div class="box-body no-padding iframeH2" style="overflow: auto;" id="scrollDiv">
        <div id="progress" class="wyui-progress"></div>
        <table class="table table-hover table-bordered text-center table-striped">
            <thead>
            <tr>
                <!--v-if="pageType=='pay'" 2018-03-12 09:44:21更改用款:增加左侧勾选框-->
                <!--<th style="width:20px;">
                    <input type="checkbox" id="checkAll" v-model="isCheckedAll"
                           v-if="pageType=='pay'"/>
                </th>-->
                <th style="min-width: 80px;">公司</th>
                <th>用款流水单号</th>
                <th style="width: 80px;">款项用途</th>
                <th style="width: 60px;">跟踪人</th>
                <th style="width: 110px;">预计还款日期</th>
                <th style="width: 110px;">预计还款金额</th>
                <th style="width: 110px;">实际退款日期</th>
                <th style="width: 110px;">实际退款金额</th>
                <th style="width: 70px;">是否结清</th>
                <th style="width: 100px;">状态</th>
                <th style="width: 120px;">操作</th>
            </tr>
            </thead>
            <tbody id="tbList">
            <tr v-for="(item,i) in list">
                <td>{{item.orgName.split('-')[0]}}</td>
                <td>{{item.seriesNumber}}</td>
                <td>{{item.type}}</td>
                <td>{{item.returnPayeeName}}</td>
                <td>{{formatDate(item.estimatedReturnDate)}}</td>
                <td>{{item.estimatedReturnMoney}}</td>
                <td>{{formatDate(item.actualReturnDate)}}</td>
                <td>{{item.actualReturnMoney}}</td>
                <td>{{item.haveReturnClear=='1'?'是':'否'}}</td>
                <td v-html="convertAuditFlagToName(item)" style="word-break:keep-all;/* 不换行 *//* 不换行 */">
                </td>
                <td>
                    <a href="javascript:void(0);" v-if="showABtn(item,'browser')"
                       @click="gotoDetail(item.id,'browser')">&nbsp;查看&nbsp;</a>
                    <a href="javascript:void(0);" v-if="showABtn(item,'edit')"
                       @click="gotoDetail(item.id,'edit')">&nbsp;编辑&nbsp;</a>
                    <a href="javascript:void(0);" v-if="showABtn(item,'audit')"
                       @click="gotoDetail(item.id,'applyAudit')">&nbsp;审核&nbsp;</a>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="oa-pager text-center" style="margin-top: 5px;">
            共
            <span id="allCount"> 0 </span>条记录&nbsp;&nbsp;&nbsp;
            <span id="nowPage"> 1 </span>/<span id="allPage">1</span>&nbsp;&nbsp;&nbsp;
            <span class="oa-pager-button" id="first">首页</span>
            <span class="oa-pager-button" id="prev">上一页</span>
            <span class="oa-pager-button" id="next">下一页</span>
            <span class="oa-pager-button" id="last">尾页</span>
        </div>
    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript">
    function refresh() {
        $.wyui.page.queryParams.requestPage = 1;
        $.wyui.page.getByPage();
    }

    var app = new Vue({
            el: '#app',
            data: {
                date: '',
                auditFlagList: [
                    {value: '', name: '审核状态'},
                    {value: '\'-1\',\'3\'', name: '未提交'},
                    {value: '\'0\',\'4\'', name: '审核中'},
                    {value: '\'1\',\'5\'', name: '已通过'},
                    {value: '\'2\',\'6\'', name: '已驳回'},
                ],
                companyList: [],
                searchParams: {
                    pageType: 'apply',
                    haveRefund: '1',
                    refundFlag: '',
                    selectCom: "",
                    userId: getCurrentUser().id,
                    type: '',
                    auditFlag: '6',//先注掉
                    money: '',
                    key: ''
                },
                pageType: "apply",//apply:用款申请，pay:付款审核
                isCheckedAll: false,
                currentUser: getCurrentUser(),
                list: [],
                rightOpENames: [],
                copierSelectedIdx: -1,
                money: {
                    main: {
                        id: ''
                    },
                    copiers: []
                }

            },
            watch: {
                isCheckedAll: function (val) {
                    for (var i = 0; i < this.list.length; i++) {
                        var item = this.list[i];
                        item.checked = this.isCheckedAll;
                    }
                }
            },
            methods: {
                /* red: function (item) {
                     var that = this;
                     var a = new Date(item.actualReturnDate).Format('yyyy-MM-dd');
                     var b = new Date(item.estimatedReturnDate).Format('yyyy-MM-dd');
                     if (that.date >= b) {
                         return true;
                     }
                     if (a >= b) {
                         return true;
                     } else {
                         return false;
                     }
                 },*/
                isEnable: function (item) {
                    return true;
                },
                closeModle: function () {
                    $(".saveModle").hide();
                },
                inputFocus: function (id) {
                    $("#" + id).focus();
                },
                selectUser: function (i, prop) {
                    this.copierSelectedIdx = -1;
                    this[prop] = i;
                },
                unselectUser: function () {
                    this.copierSelectedIdx = -1;
                },
                formatDate: function (now) {
                    if (typeof(now) == "undefined") {
                        return '';
                    } else if (now == '') {
                        return '';
                    } else {
                        var d = new Date(now);
                        var hour = d.getHours();
                        var minute = d.getMinutes();
                        var second = d.getSeconds();
                        var month = d.getMonth() + 1
                        var day = d.getDate();
                        if (hour < 10) {
                            hour = "0" + hour;
                        }
                        if (minute < 10) {
                            minute = "0" + minute;
                        }
                        if (month < 10) {
                            month = "0" + month;
                        }
                        if (day < 10) {
                            day = "0" + day;
                        }
                        return hour + ":" + minute + " " + month + "-" + day;
                    }
                },
                deleteUser: function (prop, idx, event) {
                    if (event.keyCode == 46 || event.keyCode == 8 && event.target.value == "") {
                        if (this[idx] > -1) {
                            this.money[prop].splice(this[idx], 1);
                            this.copierSelectedIdx = -1;
                        } else {
                            this[idx] = this.money[prop].length - 1;
                        }
                    }
                },
                payAudit: function (auditFlag) {
                    var ids = new Array();
                    for (var i = 0; i < this.list.length; i++) {
                        if (this.list[i].checked && this.list[i].auditFlag == '3' && this.list[i].currentAuditorId == getCurrentUser().id) {
                            ids.push(this.list[i].id);
                        } else {
                            this.list[i].checked = false;
                        }
                    }
                    if (ids.length == 0) {
                        alert("请选择要提交的付款记录");
                        return;
                    }
                    $.wyui.postMethod(urlConfig.apply.money.payAudit, {
                        ids: ids.join(','),
                        userId: getCurrentUser().id,
                        auditFlag: auditFlag
                    }, function () {
                        alert("审核成功");
                        $.wyui.page.getByPage();
                    });
                },
                submitPay: function () {
                    var ids = new Array();
                    for (var i = 0; i < this.list.length; i++) {
                        if (this.list[i].checked && this.list[i].auditFlag == '1') {
                            ids.push(this.list[i].id);
                        } else {
                            this.list[i].checked = false;
                        }
                    }
                    if (ids.length == 0) {
                        alert("请选择要提交的付款记录");
                        return;
                    }
                    $.dialog({
                        content: 'url:configPayAuditor.html?ids=' + ids.join(',') + '&t=' + new Date(),
                        title: '配置付款审核人',
                        width: 600,
                        height: 300,
                        max: false,
                        min: false,
                        lock: true
                    });
                },
                convertAuditFlagToName: function (item) {
                    //-1 跟踪人第一审核草稿（上级） 0审核中 1通过 2驳回
                    //3 跟踪人第二审核草稿（上级，财务）4审核中 5通过 6驳回
                    switch (item.refundFlag) {
                        case "-1":
                        case "3":
                            return "未提交";
                            break;
                        case "0":
                        case "4":
                            return "<span style='color:red;'>待-" + item.currentAuditorName + "-审核</span>";
                            break;
                        case "1":
                        case "5":
                            return "已通过";
                            break;
                        case "2":
                        case "6":
                            return "已驳回";
                            break;
                        default :
                            break;
                    }
                },
                showABtn: function (item, btnName) {
                    switch (btnName) {
                        case 'browser':
                            switch (item.refundFlag) {
                                case '-1':
                                    return item.returnPayeeId == currentUser.id || currentUser.id == item.createUserId;
                                    break;
                                default :
                                    true;
                            }
                            return true;
                            break;
                        case 'edit':
                            return item.refundFlag != '0' && item.refundFlag != '1' && item.returnPayeeId == currentUser.id;
                            break;
                        case 'audit':
                            return item.refundFlag == '0' && currentUser.id == item.currentAuditorId;
                            break;
                        default:
                            break;
                    }
                },
                showBtn: function (btnName) {
                    switch (btnName) {
                        case "submitPay":
                            return this.pageType == 'pay' && ($.inArray('submitPay', this.rightOpENames) > -1);
                            break;
                        case "addApply":
                            return this.pageType == 'apply';
                            break;
                        case "payAudit":
                            if (this.pageType == 'apply') {
                                return false;
                            }
                            var result = false;
                            for (var i = 0; i < this.list.length; i++) {
                                if (this.list[i].currentAuditorId == getCurrentUser().id) {
                                    result = true;
                                    break;
                                }
                            }
                            return result;
                            break;
                        default:
                            break;
                    }
                },
                gotoDetail: function (id, pageType) {
                    $.dialog({
                        content: 'url:genzong_detail.html?id=' + id + '&pageType=' + pageType,
                        title: "退款跟踪",
                        width: 904,
                        height: 400,
                        max: true,
                        min: true,
                        lock: true
                    });
                },
                search: function () {
                    var that = this;
                    var data = {
                        'companyId': that.searchParams.selectCom,
                        'auditFlag': that.searchParams.auditFlag,
                        'refundFlag': that.searchParams.refundFlag,
                        'pageType': 'apply',
                        'haveRefund': '1',
                        'key': that.searchParams.key,
                        'userId': that.searchParams.userId
                    };
                    $.wyui.page.queryParams.requestPage = 1;
                    /*$.extend($.wyui.page.queryParams, this.searchParams);*/
                    $.extend($.wyui.page.queryParams, data);
                    console.log($.wyui.page.queryParams);
                    $.wyui.page.getByPage();
                },
                removeById: function (id, i) {
                    if (confirm('确认要删除吗？')) {
                        var that = this;
                        $.wyui.postMethod(urlConfig.apply.money.removeById, {id: id}, function (result) {
                            that.list.splice(i, 1);
                        });
                    }
                },
                getCopier: function (id) {
                    var that = this;
                    that.money.main.id = id;
                    $.wyui.postMethod(urlConfig.apply.copier.moneycopier, {moneyId: id}, function (result) {
                        console.log(result);
                        that.money.copiers = result;
                        $(".saveModle").show();
                    });

                },
                gotoReturnMoney: function (id) {
                    var H = $(window).height() - 50;
                    $.dialog({
                        content: 'url:returnMoney.html?id=' + id,
                        title: '填写用款说明',
                        width: 400,
                        height: 400,
                        max: true,
                        min: true,
                        lock: true
                    });
                },
                saveGo: function () {
                    var that = this;
                    console.log(that.copiers);
                    $.wyui.postMethod(urlConfig.apply.copier.save, that.money, function (r) {
                        alert("保存成功");
                        $(".saveModle").hide();
                        $.wyui.page.getByPage();
                    })

                }
            },
            mounted:

                function () {
                    var that = this;
                    this.pageType = $.wyui.page.urlParams.pageType;
                    $.wyui.postMethod(urlConfig.system.rightOp.getRightOpByUserId, {userId: getCurrentUser().id}, function (rightOps) {
                        for (var i = 0; i < rightOps.length; i++) {
                            that.rightOpENames.push(rightOps[i].eName);
                        }
                    });
                    $.wyui.postMethod(urlConfig.system.company.getCompanyByUserId, {userId: getCurrentUser().id}, function (r) {
                        console.log(r);
                        that.companyList = r;
                    });
                    $.wyui.postMethod("/system/getCurrentTime.json", {}, function (now) {
                        var d = new Date(now.dateTime);
                        that.date = d.Format('yyyy-MM-dd');
                    });
                }

        })
    ;

    $.wyui.page.dataUrl = server.ip + urlConfig.apply.money.getByPage;
    $.wyui.page.queryParams.pageType = $.wyui.page.urlParams.pageType;
    $.extend($.wyui.page.queryParams, app.searchParams);
    $.wyui.page.getByPage_callback = function (records) {
        app.list = records;
        document.getElementById("scrollDiv").scrollTop = 0;
    };
    $.wyui.page.getByPage_scroll_callback = function (list) {
        if (list.length < 30) {
            isLoad = false;
        } else {
            for (var i = 0; i < list.length; i++) {
                app.list.push(list[i]);
            }
            isLoad = true;
        }
    };

    $(function () {
        $(".saveModle").show();
        $("#txtCopier").autoComplete({
            url: server.ip + urlConfig.system.user.getTop10ByNameUser,
            render: function (users, panel) {
                for (var i = 0; i < users.length; i++) {
                    $("<li></li>").data("autoComplete",
                        users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                        "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                var copierIds = new Array();
                for (var i = 0; i < app.money.copiers.length; i++) {
                    copierIds.push(app.money.copiers[i].copyPersonId);
                }
                if ($.inArray(user.id, copierIds) > -1) {
                    alert("收件人或抄送人重复");
                    $(this).val("");
                    return false;
                } else {
                    app.money.copiers.push({copyPersonId: user.id, copyPersonName: user.name});
                    $(this).val("");
                    return false;
                }
            },
            height: 210,
            width: 320,
            top: 0,
            left: 0
        });
        $(".saveModle").hide();
    });
</script>
<script>
    /************************滚动加载******************************/
    var divscroll = document.getElementById('scrollDiv');

    function divScroll() {
        var wholeHeight = divscroll.scrollHeight;
        var scrollTop = divscroll.scrollTop;
        var divHeight = divscroll.clientHeight;
        console.log(scrollTop + divHeight, wholeHeight)
        if (scrollTop + divHeight >= wholeHeight - 2) {
//            alert('滚动到底部了！');
            if (isLoad) {
                isLoad = false;
                setTimeout($.wyui.page.getByPage("scroll"), 1000);

            }

            //这里写动态加载的逻辑，比如Ajax请求后端返回下一个页面的内容
        }

    }

    divscroll.onscroll = divScroll;
</script>
</body>
</html>